<template>
  <div>
    <div style="width: 100%;height: 100%;background-color: rgba(230,204,233,0.5);">
      <vue-particles
          color="#555"
          :particleOpacity="0.7"
          :particlesNumber="150"
          shapeType="circle"
          :particleSize="4"
          linesColor="#555"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="false"
          clickMode="push"
          class="lizi"
      />
    </div>
    <div style="width: 400px;height: 350px;margin: 150px auto;background-color: rgba(122, 114, 244,0.5);border-radius: 10px;float: left;position: absolute;bottom: 200px;left: 770px;">
      <div style="width: 100%;height: 100px;font-size: 30px;line-height: 100px;text-align: center;color: white">欢迎注册</div>
      <div style="margin-top: 25px;text-align: center;height: 320px">
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="form.judUsername" prefix-icon="el-icon-user" style="width: 80%" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.judPassword" prefix-icon="el-icon-user" style="width: 80%" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <template slot-scope="scope">
               <el-button style="width: 80%;background-color: #6743be;margin-top: 10px" type="primary" @click="register()">注册</el-button>
            </template>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script >
import request from "@/utils/request";
const params = new URLSearchParams();
export default {
  name: 'Register',
  data() {
    return {
      form: {}
    }
  },
  //页面加载的时候，做一些事情，在created里面
  created() {

  },
  //定义一些页面上控件触发的事件调用的方法
  methods: {
    register() {
      request.post("/judge/register", this.form)
        .then(res => {
          if (res.code === 1) {
            this.$message({
              message: '注册成功',
              type: 'success'
            });
            this.$router.push('/login');
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        })
        .catch(error => {
          this.$message({
            message: error.response ? error.response.data : error.message,
            type: 'error'
          });
        });
    }
  }
}
</script >

<style>
.my-component {
  width: 100%;
  height: 100%;
  background-color: #4a5ed0;
}
</style>
